<template>
  <div>
        <var-row class="var-row-top">
            <var-col :span="17"><var-icon name="map-marker" style="margin-left:0.1rem;font-size:0.18rem"/><span class="span1">北大青鸟(广力校区)</span></var-col>
            <var-col :span="3"><div class="var-col-top"><div style="width:0.5rem;height:0.28rem;float:left;text-align:center;"><var-icon name="dots-vertical" style="transform:rotate(90deg);height:0.28rem;"/></div><div style="text-align:center;width:0.49rem;float:right;height:0.28rem;border-left:0.01rem solid #e0d287"><var-icon name="radio-marked" style="height:0.28rem;"/></div></div></var-col>
        </var-row>
        <div class="content">
            <var-row>
                <p class="var-col-Ss"><input type="text" placeholder="华西餐厅"><button style="font-size:0.12rem">搜索</button></p>
            </var-row>
            <ul>
                <li>咖啡</li>
                <li>沙拉</li>
                <li>捞面</li>
                <li>沙茶面</li>
                <li>瑞信咖啡</li>
            </ul>
        </div>
        <div class="zhubox">
            <var-row :span="20" justify="space-around">
                <var-col :span="4"><img src="@/assets/meishi.png" style="width:0.5rem;height:0.5rem"></var-col>
                <var-col :span="4"><img src="@/assets/tianping.png" style="width:0.5rem;height:0.5rem"></var-col>
                <var-col :span="4"><img src="@/assets/chaoshi.png" style="width:0.5rem;height:0.5rem"></var-col>
                <var-col :span="4"><img src="@/assets/shuiguo.png" style="width:0.5rem;height:0.5rem"></var-col>
                <var-col :span="4"><img src="@/assets/maiyao.png" style="width:0.5rem;height:0.5rem"></var-col>
            </var-row>
            <var-row :span="20" justify="space-around">
                <var-col :span="4">美食</var-col>
                <var-col :span="4">甜点饮品</var-col>
                <var-col :span="4">超市便利</var-col>
                <var-col :span="4">蔬菜水果</var-col>
                <var-col :span="4">买药</var-col>
            </var-row>
            <var-row :span="20" justify="space-around">
                <var-col :span="4"><img src="@/assets/wula.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/paotui.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/shengjuan.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/pinghaofan.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/xiaochi.png" style="width:0.4rem;height:0.4rem"></var-col>
            </var-row>
            <var-row :span="20" justify="space-around">
                <var-col :span="4">午餐</var-col>
                <var-col :span="4">跑腿</var-col>
                <var-col :span="4">天天神卷</var-col>
                <var-col :span="4">拼好饭</var-col>
                <var-col :span="4">煲仔饭</var-col>
            </var-row>
            <var-row :span="20" justify="space-around">
                <var-col :span="4"><img src="@/assets/lianm.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/fengmian.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/hanbao.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/jiaozi.png" style="width:0.4rem;height:0.4rem"></var-col>
                <var-col :span="4"><img src="@/assets/fenlei.png" style="width:0.4rem;height:0.4rem" @click="getCateList"></var-col>
            </var-row>
            <var-row :span="20" justify="space-around">
                <var-col :span="4">津贴联盟</var-col>
                <var-col :span="4">暖胃粉面</var-col>
                <var-col :span="4">全城必点</var-col>
                <var-col :span="4">美团专送</var-col>
                <var-col :span="4" @click="getCateList">全部分类</var-col>
            </var-row>
            <var-row style="line-height:0.27rem">
                <div style="display: flex;overflow:hidden">
                  <button>津贴优惠</button>
                  <button>跨天预订</button>
                  <button>减配送费</button>
                  <button>减</button>
                </div>
                <var-col :span="3" style="height:0.27rem;float:right"><var-icon name="menu"  @click="top = true"/></var-col>
            </var-row>
             <var-list
                :finished="finished"
                v-model:loading="loading"
                @load="load"
                style="margin-bottom:0.64rem"
              >
                <var-cell :key="item" v-for="item in list" style="margin:0;padding:0">
                  <div class="meishibox"  v-for="item in aaaa" :key="item.did" @click="tiaozhuandianbu(item.did)" >
                    <img :src="item.pic" style="width:1rem;height:1rem;border-radius: 0.05rem;margin:0.1rem;float:left">
                    <div>
                      <span style="font-size:0.14rem;font-weight:700;">{{item.dname}}</span><span></span><br>
                      <p><span style="background-color:#f88209;color:#ffffff;border-radius:0.05rem 0 0 0.05rem;border:0.01rem solid #f88209;font-size:0.12rem;">接受预定</span><span style="border-radius:0 0.05rem 0.05rem 0;border:0.01rem solid #f88209;color:#f88209;font-size:0.12rem;">10.30后配送</span></p>
                      <span style="color:#f88209;margin-right:0.05rem"><var-icon name="star" />4.7</span><span style="color:#777777;margin-right:0.05rem">月售{{item.Msales}}</span><span style="color:#777777;margin-right:0.05rem">人均￥{{item.PCapita}}</span><span style="color:#777777;border:0.01rem solid #777777;border-radius:0.05rem;">美团快送</span><br>
                      <span style="color:#777777;margin-right:0.05rem">起送￥{{item.SDelivery}}</span><span style="color:#777777;margin-right:0.05rem">配送</span><span style="color:#777777;margin-right:0.05rem">{{item.FDelivery}}</span><span style="color:#777777;margin-right:0.05rem">{{item.time}}</span><span style="color:#777777;margin-right:0.05rem">{{item.Distance}}</span><br>
                      <span style="background-color:#fdf9e2;color:#c9862f;margin-right:0.05rem">{{item.Repurchase}}</span><span style="background-color:#fdf9e2;color:#c9862f;margin-right:0.05rem" >{{item.Browse==1 ? "近30天浏览过" : null}}</span><br>
                      <span style="color:#a65d5f;border:#a65d5f 0.01rem solid;border-radius:0.05rem">{{item.Discount}}</span>
                    </div>
                  </div>
                </var-cell>
              </var-list>
        </div>
        <var-popup position="top" v-model:show="top" >
          <div class="popup-example-block">
            <var-row>
                <p class="var-col-Sss"><input type="text" placeholder="华西餐厅"></p>
            </var-row>
            <var-row><span style="font-size:0.14rem;font-weight:700;margin:0.1rem 0;">配送</span></var-row>
            <var-row>
              <button v-for="(item,index) in dddd" :key="index" :class="item.yaoshi" :style="item.yangshi" @click="peisongxuanding(index)">{{item.name}}</button>
              <!-- <button style="margin-right:2%">美团快送</button>
              <button>到店自取</button>-->
              </var-row>
            <var-row  style="font-size:0.12rem;margin:0.1rem 0;">
              人均价筛选
              <var-slider v-model="value" 
                range 
                active-color="#ffd553"
                label-text-color="#ededed"
                style="width:100%">
                <template #button="{ currentValue }">
                  <div class="slider-example__block"><span style="transform:rotate(45deg)">{{ currentValue }}</span></div>
                </template>
              </var-slider>
            </var-row>
            <var-row></var-row>
            <var-row><span style="font-size:0.14rem;font-weight:700;margin:0.1rem 0;">速度</span></var-row>
            <var-row>
              <button v-for="(item,index) in bbbb" :key="index" :class="item.yaoshi" :style="item.yangshi" @click="gaibianyangshi(index)">{{item.name}}</button>
              <!-- <button style="margin-right:2%">40分钟内</button>
              <button style="margin-right:2%">50分钟内</button>
              <button>60分钟内</button>
              <button style="margin-right:2%">1km内</button>
              <button style="margin-right:2%">2km内</button>
              <button style="margin-right:2%">3km内</button>
              <button>5km内</button> -->
            </var-row>
            <var-row><span style="font-size:0.14rem;font-weight:700;margin:0.1rem 0;">商家特色</span></var-row>
            <var-row>
              <button v-for="(item,index) in cccc" :key="index" :class="item.yaoshi" :style="item.yangshi" @click="xuanzhongzhaungtai(index)">{{item.name}}</button>
              <!-- <button style="margin-right:2%">0元起送</button>
              <button style="margin-right:2%">跨天预定</button>
              <button>开发票</button> -->
            </var-row>
            <var-row><button style="width:48%;margin-right:4%;height:0.3rem;font-size:0.14rem;margin-top:0.1rem;">重置</button><button  style="width:48%;background:#ffd553;height:0.3rem;font-size:0.re14m;margin-top:0.1rem" @click="top = false">完成</button></var-row>
          </div>
        </var-popup>
  </div>
  
</template>

<script lang="ts" setup >

import { ref ,onMounted,reactive } from 'vue';
import {getproductsList} from "../../api/shouye";
import {useRouter} from 'vue-router'

  let aaaa=ref([])
  let top = ref(false)
  onMounted(()=>{
      //发送请求，获取数据
      getproductsList().then((data:any)=>{
          console.log(data,"fjsdkfjldkfjklwefj");
          aaaa.value=data.data
          console.log(aaaa,"44444");
          
    })
  })
  let bbbb=reactive([
    {name:"30分钟内",yaoshi:"button-1",yangshi:null},
    {name:"40分钟内",yaoshi:"button-1",yangshi:null},
    {name:"50分钟内",yaoshi:"button-1",yangshi:null},
    {name:"60分钟内",yaoshi:null,yangshi:null},
    {name:"1km内",yaoshi:"button-1",yangshi:null},
    {name:"2km内",yaoshi:"button-1",yangshi:null},
    {name:"3km内",yaoshi:"button-1",yangshi:null},
    {name:"5km内",yaoshi:null,yangshi:null}
  ])
  let cccc=reactive([
    {name:"新商家",yaoshi:"button-1",yangshi:null},
    {name:"0元起送",yaoshi:"button-1",yangshi:null},
    {name:"跨天预定",yaoshi:"button-1",yangshi:null},
    {name:"开发票",yaoshi:null,yangshi:null},
    {name:"优选商家",yaoshi:"button-1",yangshi:null},
    {name:"赠准时宝",yaoshi:"button-1",yangshi:null},
    {name:"放心吃",yaoshi:"button-1",yangshi:null},
    {name:"极速退款",yaoshi:null,yangshi:null},
  ])
  let dddd=reactive([
    {name:"美团专送",yaoshi:"button-1",yangshi:null},
    {name:"美团快送",yaoshi:"button-1",yangshi:null},
    {name:"到店自取",yaoshi:"button-1",yangshi:null},
  ])
  let tiaozhuandianbu=(id:any)=>{
    router.push({
      path:'/dianpu',
      query:{id:id}
    }) 
  }
  let xuanzhongzhaungtai =(index)=>{
    if(cccc[index].yangshi ==null){
      cccc[index].yangshi="background:#ffd553"
    }else{
      cccc[index].yangshi=null
    }
  }
  let peisongxuanding =(index)=>{
    if(dddd[index].yangshi ==null){
      dddd[index].yangshi="background:#ffd553"
    }else{
      dddd[index].yangshi=null
    }
  }
  let gaibianyangshi = (index)=>{
    if(bbbb[index].yangshi ==null){
      bbbb.forEach(item => {
        item.yangshi=null
      });
      bbbb[index].yangshi="background:#ffd553"
    }else{
      bbbb[index].yangshi=null
    }
  }
  let router = useRouter();
  let getCateList=()=>{
  router.push('/fenlei')
  }
const loading = ref(false)
const finished = ref(false)
const list = ref([])

const load = () => {
  setTimeout(() => {
    for (let i = 0; i < 1; i++) {
      list.value.push(list.value.length + 1)
    }
    loading.value = false
    if (list.value.length >= 60) {
      finished.value = true
    }
  }, 1000)
}

let value = ref([24, 50])

let handleChange = (value) => {
  console.log(value)
}
var designWidht=375;
var remPx=100;
var scale =window.innerWidth/designWidht;
document.documentElement.style.fontSize=scale*remPx+"px"

</script>
<style lang="scss" scoped>
    html{font-size: 58.59375px;}
    .var-row-top{background: #ffd553;height: 0.65rem;}
    .var-col-top{
      border-radius: 0.2rem;background: #ffe8b7;display: block;height: 0.28rem;width: 1rem;margin-top: 0.03rem;float: right;line-height:0.28rem;
    }
    .span1{font-weight: 600;margin: 0.1rem 0;font-size: 0.16rem;}
    .var-bottom-navigation{}
    .content{border-radius: 0.15rem;width: 100vw;position: relative;top:-0.15rem;background: #ffffff;}
    .var-col-Ss input{border:0;height: 0.31rem;border-radius: 0.15rem;outline: none;padding: 0 0.1rem;position: absolute;top:0}
    .var-col-Ss{margin: 0.1rem;height: 0.35rem;border-radius: 0.15rem;border: 0.02rem #ffd553 solid;width: 100%;position: relative;}
    .var-col-Ss button{height: 0.31rem;border-radius: 0.15rem;width: 0.5rem;border:0;background: #ffd553;float: right;margin-right: -0.02rem;}
    .content ul{height: 0.2rem;list-style:none;margin: 0;margin:0px 0.1rem;}
    .content ul li{float: left;height: 0.2rem;border-radius: 0.15rem;background: #f5f5f5;font-size: 0.12rem;line-height: 0.2rem;padding: 0px 0.1rem;margin-right: 0.07rem;}
    .zhubox{
        padding: 0.1rem;height: 100%;background-image: linear-gradient(#ffffff 1rem, #f6f6f6 2rem);
        .var-row{
          .var-col{
            p{font-size: 0.12rem;}
          }
          margin:0.05rem 0;
          button{border-radius: 0.05rem;border: 0;background: #ffffff;padding: 0.05rem 0.15rem ;font-size: 0.13rem; margin-right: 0.05rem;}
          
        }
      }
    .zhubox .var-row .var-col{font-size: 0.12rem;justify-content: center;color: #212121;}
    .meishibox{
      background: #ffffff;border-radius: 0.05rem;height: 1.4rem;width: 100%;margin-bottom: 0.1rem;
      img{float: left;}
      div{
        padding: 0.1rem;
        float: left;
        span{font-size:0.12rem}
      }
    }
    .popup-example-block{
      padding: 0.1rem;
      .var-row{
        .slider-example__block {
          width: 0.24rem;
          border: 0.03rem solid #ffd553;
          color: #ffd553;
          height: 0.24rem;
          margin: 0 -0.12rem;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: #ebebeb 0 0.02rem 0.02rem;
          border-radius: 50% 0.02rem 50% 50%;
          transform:rotate(-45deg);
          font-size:0.12rem;
          background-color: #fff;
        }
          .var-col-Sss input{border:0;height: 0.31rem;border-radius: 0.15rem;outline: none;padding: 0 0.1rem;position: absolute;top:0}
          .var-col-Sss{height: 0.35rem;border-radius: 0.15rem;border: 0.02rem #ffd553 solid;width: 100%;position: relative;}
          .var-col-Sss button{height: 0.31rem;border-radius: 0.15rem;width: 0.5rem;border:0;background: #ffd553;float: right;margin-right: -0.02rem;}
          button{width: 23.5%;border: 0;height: 0.25rem;font-size: 0.12rem;border-radius: 0.05rem;margin: 0.05rem 0;}
          .button-1{margin-right: 2%;}
      }
    }
</style>
